<template>
  <BasicModal
    v-bind="$attrs"
    title="添加队列"
    @register="register"
    :destroyOnClose="true"
    @ok="submit"
    @cancel="close"
  >
    <BasicForm @register="registerForm">
      <template #name="{ model, field }">
        <Input v-model:value="model[field]" :disabled="isEdit" />
      </template>
      <template #submitStrategy>
        <Collapse expandIconPosition="right" :default-active-key="['1']">
          <CollapsePanel header="提交设置" :forceRender="true" key="1">
            <BasicForm @register="registersubmitStrategy"
          /></CollapsePanel>
        </Collapse>
      </template>
      <template #processingStrategy>
        <Collapse expandIconPosition="right" :default-active-key="['1']">
          <CollapsePanel header="重试处理设置" :forceRender="true" key="1">
            <BasicForm @register="registerprocessingStrategy"
          /></CollapsePanel>
        </Collapse>
      </template>
      <template #pollingSetting>
        <Collapse expandIconPosition="right" :default-active-key="['1']">
          <CollapsePanel header="轮询设置" :forceRender="true" key="1">
            <BasicForm @register="registerpollingSetting">
              <template #consumerPerPartition="{ model, field }">
                <Checkbox v-model:checked="model[field]">每个分区消费者单独轮询消息</Checkbox>
              </template>
            </BasicForm>
          </CollapsePanel>
        </Collapse>
      </template>
      <template #additionalInfo> <BasicForm @register="registeradditionalInfo" /></template>
    </BasicForm>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Collapse, CollapsePanel, Checkbox, Input } from 'ant-design-vue';
  import { BasicForm, useForm } from '/@/components/Form';
  import { modalFormStyleSetting } from '/@/settings/thingsBoardDesign';
  import { postQueues, getQueues } from '/@/api/thingsborad/settings/BasicSetting/basicSetting';
  import {
    queuesForm,
    submitStrategyForm,
    processingStrategyForm,
    pollingSettingForm,
    additionalInfoForm,
  } from './queue.data';
  import { ref } from 'vue';
  let isEdit = ref<boolean>(false);
  let queuesData = ref<Recordable>({});
  const emits = defineEmits(['success']);
  const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
    if (data) {
      setModalProps({ title: '修改队列' });
      let res: Recordable = {};
      let param = '/' + data.record.id;
      try {
        res = await getQueues(param);
      } catch (e) {
        console.error('获取队列信息失败', e);
      }
      isEdit.value = true;
      queuesData.value = res;
      setFieldsValue(res);
      setsubmitStrategyValue(res.submitStrategy);
      setprocessingStrategyValue(res.processingStrategy);
      pollingSettingValue(res);
      if (res.additionalInfo) {
        additionalInfoValue(res.additionalInfo);
      }
    } else {
      isEdit.value = false;
    }
  });
  const [registerForm, { validate, setFieldsValue }] = useForm({
    layout: 'vertical',
    schemas: queuesForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registersubmitStrategy,
    { validate: validateSubmitStrategy, setFieldsValue: setsubmitStrategyValue },
  ] = useForm({
    layout: 'vertical',
    schemas: submitStrategyForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registerprocessingStrategy,
    { validate: validateProcessingStrategy, setFieldsValue: setprocessingStrategyValue },
  ] = useForm({
    layout: 'vertical',
    schemas: processingStrategyForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registerpollingSetting,
    { validate: validatePollingSetting, setFieldsValue: pollingSettingValue },
  ] = useForm({
    layout: 'vertical',
    schemas: pollingSettingForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  const [
    registeradditionalInfo,
    { validate: validateAdditionalInfo, setFieldsValue: additionalInfoValue },
  ] = useForm({
    layout: 'vertical',
    schemas: additionalInfoForm,
    showActionButtonGroup: false,
    ...modalFormStyleSetting,
  });
  async function submit() {
    let data: Recordable = {};
    data = await validate();
    data.submitStrategy = await validateSubmitStrategy();
    data.processingStrategy = await validateProcessingStrategy();
    Object.assign(data, await validatePollingSetting());
    data.additionalInfo = await validateAdditionalInfo();
    if (isEdit.value) {
      Object.assign(queuesData.value, data);
      await postQueues(queuesData.value);
      emits('success', 'edit');
    } else {
      data.topic = 'tb_rule_engine.' + data.name;
      try {
        await postQueues(data);
      } catch (e) {
        console.error('提交失败', e);
      }
      emits('success', 'add');
    }
    closeModal();
  }
  function close() {
    isEdit.value = false;
    queuesData.value = {};
  }
</script>
